<template>
	<view class="container">
		<view class="content">
			<view class="gui-flex gui-space-between gui-align-items-center">
				<view class="p-title">
					群的設置
				</view>
				<view class="bnt-save" @click="onSave">
					保存
				</view>
			</view>

			<view class="c-view">
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						搶群聊模式 
						<tip> 
							<view slot="tip">
								選擇搶群紅包模式，全部群/指定群</br>
								指定群需配合綁群指令使用，支持企業外部群
							</view>
						</tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'quni')" :value="quni" :range="qunList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{qunList[quni].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="quni == 1">
					<view class="c-label gui-flex gui-align-items-center  gui-flex1">
						綁定指定群指令 
						<tip> 
							<view slot="tip">
								搶群聊模式選擇指定群後在需要搶紅包的群聊中</br>
								發送設置的綁群指令，可邦定/取消搶指定群
							</view>
						</tip>
					</view>
					<view class="gui-flex gui-align-items-center gui-flex1">
						<input type="text" class="gui-editor-center" v-model="qContent" placeholder="邦指定群指令" />
					</view>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="quni == 1">
					<view class="c-label gui-flex gui-align-items-center  gui-flex1">
						指定群列表 
						<tip> 
							<view slot="tip">
								已指定的搶群列表
							</view>
						</tip>
					</view>
					<view class="gui-flex gui-align-items-center gui-flex1 gui-space-between">
						<text class="gui-flex1">暫未指定</text>
						<text class="gui-icons">&#xe601;</text>
					</view>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="quni == 1">
					<view class="c-label gui-flex gui-align-items-center">
						更新群組 
						<tip> 
							<view slot="tip">從群組列表中選擇指定群
							</view>
						</tip>
					</view>
					<view class="bnt-save" @click="onSave">
						刷新群組
					</view>
				</view>
			</view>
			
			<view class="p-title">
				通用設置
			</view>
			<view class="c-view">
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center  gui-flex1">
						搶包延遲(毫秒) <tip>
							<view slot="tip">
								延遲多少毫秒搶紅包，1000毫秒=1秒
							</view></tip>
					</view>
					<view class="gui-flex gui-align-items-center gui-flex1">
						<input type="text" class="gui-editor-center" v-model="qContent" placeholder="请输入" />
					</view>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center  gui-flex1">
						探測時效(秒) <tip>
							<view slot="tip">
								探測時效默認300秒，即5分鍾</br>
								紅包超過5分鍾時效，放棄此紅包，視爲不搶
							</view></tip>
					</view>
					<view class="gui-flex gui-align-items-center gui-flex1">
						<input type="text" class="gui-editor-center" v-model="qContent" placeholder="请输入" />
					</view>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						不搶賠付包 <tip>
							<view slot="tip">
								開啓後不搶紅包數量爲1個的紅包</br>
								紅包數量爲1個都視爲賠付包
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						不搶自己的紅包 <tip>
							<view slot="tip">不秒搶自己賬號發的紅包
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						搶包明細推送 <tip>
							<view slot="tip">開啓後文件傳輸助手推送搶包明細
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						中雷明細推送 <tip>
							<view slot="tip">開啓後文件傳輸助手推送中雷明細
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
			</view>
			<view class="p-title">
				多號設置
			</view>
			<view class="c-view">
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						多秒號模式 <tip>
							<view slot="tip">
								多個秒號的情況下<br>隨機=隨機選擇一個秒號搶包<br>輪換=輪流切換在線秒號循環搶包<br>全秒=所有在線秒號都會搶包
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'num1i')" :value="num1i" :range="numList1"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{numList1[num1i].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						多尾號模式 <tip>
							<view slot="tip">
								多個尾號的情況下<br>隨機=隨機選擇一個尾號搶尾包<br>輪換=輪流切換在線尾號循環搶尾包<br>全尾=所有在線尾號都會搶最後一個尾包
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'num2i')" :value="num2i" :range="numList2"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{numList2[num2i].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
			</view>
			<view class="p-title">
				玩法設置
			</view>
			<view class="c-view">
				<view class="c-item gui-flex gui-align-items-center gui-border-b">
					<view :class="['tab-item',{active:item.id == tabId}]" v-for="(item,index) in tabs" :key="index" @click="tabId = item.id">
						{{item.label}}
					</view>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						雷值位置 <tip>
							<view slot="tip">
								用于計算雷值的金額位置<br>1，分位置：如今日38.69，雷則爲9<br>2，角位置：如今日38.69，雷則爲6<br>3，元位置：如今日38.69，雷則爲8
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'dxi')" :value="dxi" :range="dxList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{dxList[dxi].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						智能識別祝福語 <tip>
							<view slot="tip">
								1.智能識別:自動識別祝福語前後位置<br>如100/123、123-100則123爲雷<br>注釋:如未開啟標題都是雷或未識別到分害符號<br>如祝福語標題為100128，則雷值為128
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						祝福語中文雷值 <tip>
							<view slot="tip">
								把中文雷值替換成普通數字<br>零、灵、领、林...為0<br>一、壹、亿、衣...為1<br>二、贰、而、饿...為2
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						祝福語全數字爲雷 <tip>
							<view slot="tip">
								1.標題都是雷:如祝福語標題為456，則456都為雷<br>注釋:如未開啟標題都是雷或未識別到分害符號<br>如祝福語標題為100128，則雷值為128
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						智能打折 <tip>
							<view slot="tip">
								用於識別紅包語無分隔符的雷值且金額不匹配祝福語<br>1，9.5折：發包金額95=100，發包金額47.5=50。<br>2，9.0折：發包金額90=100，發包金額45=50。<br>3，8.5折：發包金額85=100，發包金額42.5=50。<br>4，8.0折：發包金額80=100，發包金額40=50。<br>註：以上默認折扣請自行計算實際群內打折情況，<br>如不匹配請選擇自定義打折。
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'dxi')" :value="dxi" :range="dxList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{dxList[dxi].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						自定義打折 <tip>
							<view slot="tip">用於識別紅包語無分隔符的雷值且金額不匹配祝福語，優先使用自定義打折<br>1，自定義添加打折規則：A=B<br>2，例如：發包金額95=100，發包金額47=50。<br>註：以上自定義折扣請根據遊戲規則實際情況而設定，避免出錯！
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						單雷包不搶 <tip>
							<view slot="tip">開啓後不搶單雷
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						多雷包不搶 <tip>
							<view slot="tip">
								開啓後不搶多雷
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						多雷轉單雷 <tip>
							<view slot="tip">
								多雷將識別為多個單雷，例如10-123識別雷值1、2、3都為單雷
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==1">
					<view class="c-label gui-flex gui-align-items-center">
						尾包強制不搶 <tip>
							<view slot="tip">
								開啓後不尾包壹律不搶
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==2">
					<view class="c-label gui-flex gui-align-items-center">
						尾數位置 <tip>
							<view slot="tip">
								使用單尾還是雙尾計算
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'dxi')" :value="dxi" :range="dxList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{dxList[dxi].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==2">
					<view class="c-label gui-flex gui-align-items-center">
						尾包不搶 <tip>
							<view slot="tip">
								請根據群玩法設置<br>如是最小尾數的接龍<br>無免死請選擇不搶最小<br>有免死請選擇不搶最小+第二小<br>免死下级+需设置指定免死号/免死号抢最小 即尾包不抢最大<br>免死上级+需设置指定免死号/免死号抢最大 即尾包不抢最小
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'dxi')" :value="dxi" :range="dxList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{dxList[dxi].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==2">
					<view class="c-label gui-flex gui-align-items-center">
						尾包強制不搶 <tip>
							<view slot="tip">
								開啓後不尾包壹律不搶
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==2">
					<view class="c-label gui-flex gui-align-items-center">
						尾数大于 <input type="text" class="gui-color-red w80" />出現<input type="text" class="gui-color-red w80" />次搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==2">
					<view class="c-label gui-flex gui-align-items-center">
						尾数小于 <input type="text" class="gui-color-red w80" />出現<input type="text" class="gui-color-red w80" />次搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==3">
					<view class="c-label gui-flex gui-align-items-center">
						尾包不搶 <tip>
							<view slot="tip">
								請根據群玩法設置<br>如是最小金額的接龍<br>無免死請選擇不搶最小<br>有免死請選擇不搶最小+第二小<br>免死下级+需设置指定免死号/免死号抢最小 即尾包不抢最大<br>免死上级+需设置指定免死号/免死号抢最大 即尾包不抢最小
								</view></tip>
					</view>
					<picker ref="mpvuePicker" @change="pickerChange($event,'dxi')" :value="dxi" :range="dxList"
						range-key="label">
						<view class="gui-flex gui-align-items-center">
							<text>{{dxList[dxi].label}}</text>
							<text class="gui-icons">&#xe601;</text>
						</view>
					</picker>
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==3">
					<view class="c-label gui-flex gui-align-items-center">
						尾包強制不搶 <tip>
							<view slot="tip">
								開啓後不尾包壹律不搶
								</view></tip>
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==3">
					<view class="c-label gui-flex gui-align-items-center">
						金額大于 <input type="text" class="gui-color-red w80" />出現<input type="text" class="gui-color-red w80" />次搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item" v-if="tabId==3">
					<view class="c-label gui-flex gui-align-items-center">
						金額小于 <input type="text" class="gui-color-red w80" />出現<input type="text" class="gui-color-red w80" />次搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
			</view>
			
			
			<view class="p-title"  v-if="tabId==1">
				玩法設置
			</view>
			
			<view class="c-view"  v-if="tabId==1">
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						單雷出現 <input type="text" class="gui-color-red w80" />次 搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余7包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余6包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余5包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余4包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余3包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
				
				<view class="gui-flex gui-space-between gui-align-items-center gui-border-b c-item">
					<view class="c-label gui-flex gui-align-items-center">
						剩余2包 剩余雷數 &gt;<input type="text" class="gui-color-red w80" />搶<input type="text" class="gui-color-red w80" />包
					</view>
					<switch :checked="autoplay" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var state = require('@/config.js');
	import tip from "./tip.vue"
	export default {
		components: {
			tip
		},
		data() {
			return {
				isLogin: !!state.isLogin(),
				userInfo: {},
				qunList:[
					{label:'全部群',id:1},
					{label:'指定群',id:2},
				],
				quni:0,
				qContent:'',
				autoplay:false,
				numList1:[
					{label:'隨機',id:1},
					{label:'輪換',id:2},
					{label:'全秒',id:3},
				],
				num1i:0,
				numList2:[
					{label:'隨機',id:1},
					{label:'輪換',id:2},
					{label:'全尾',id:3},
				],
				num2i:0,
				tabs:[
					{label:'掃雷玩法',id:1},
					{label:'尾數接龍',id:2},
					{label:'大小玩法',id:3},
				],
				tabId:1,
				dxList:[
					{label:'最小',id:1},
					{label:'第二小',id:1},
				],
				dxi:0,
			};
		},
		onShow() {},
		methods: {
			pickerChange(e,t) {
				let i = e.detail.value;
				this[t] = i;
				switch(t){
					case 'quni':
					break;
				}
			},
		}
	};
</script>

<style scoped lang="less">
	.container {
		width: 100%;
		min-height: calc(100vh - 100rpx);
		background: url() no-repeat top right,
			url() no-repeat bottom left;
		background-color: #f9f9f9;
		max-width: 750rpx;
		margin: 0 auto;

		.content {
			padding: 20rpx;

			.p-title {
				border-bottom: 10rpx solid #1c2d66;
				border-bottom-left-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
				width: 160rpx;
				text-align: center;
				font-size: 30rpx;
				margin-left: 20rpx;
				color: #999999;
				padding-bottom: 20rpx;
			}

			.bnt-save {
				background-color: #1c2d66;
				color: #ffffff;
				font-size: 26rpx;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
			}
			
			.c-view{
				background-color: #fff;
				border-radius: 10rpx;
				// overflow: hidden;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				.c-item{
					padding:  20rpx;
				}
				.tab-item{
					flex: 1;
					text-align: center;
					padding: 10rpx 0;
					border-bottom: 2px solid transparent;
				}
				.active{
					border-color: #1c2d66;
					color: #1c2d66;
				}
			}
		}
		.w80{
			width: 80rpx;
			text-align: center;
		}
	}
</style>